<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="utf-8">
	  	<title></title>
	  	<meta name="renderer" content="webkit">
	  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	  	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	  	<link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="/usercp/style/admin.css" media="all">
  		<link rel="stylesheet" href="/usercp/style/template.css" media="all">
	</head>
	<body>
		<div class="layui-fluid layadmin-maillist-fluid">
			<div class="layui-form" id="template_form" lay-filter="template_form" style="padding: 20px 0 0 0;">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title" style="margin-bottom: 20px;">
					   	<li class="layui-this" data-value="baidu">百度小程序模板</li>
					</ul>
					<div class="layui-fluid layadmin-cmdlist-fluid">
					    <div class="layui-row layui-col-space30">
					    	{foreach $templates as $template}
					    	<div class="layui-col-md2 layui-col-sm4 {if ($site_template['baidu']['style_id'] == $template['id']) }selected{/if}">
						        <div class="cmdlist-container">
						            <img src="{$template['imgs']}">
					                <div class="info">{$template['title']}</div>
					                {if ($site_template['baidu']['style_id'] != $template['id']) }
					                <div class="tplmsk">
                                        <a class="tplbtn" data-typeid="{$template['id']}" data-type="baidu" href="javascript:;" >立即使用</a>
                                    </div>
                                    {/if}
						        </div>
					      	</div>
					      	{/foreach}
						</div>
					</div>
				</div>  
				
			</div>
		</div>
		<style>
			html {
				background-color: #fff;
			}
			.m-site-framebody {
				padding: 10px 15px;
			}
			.m-site-framebody-header {
				margin-bottom: 20px;
				padding-bottom: 10px;
				font-size: 14px;
				border-bottom: 1px solid #e6e6e6;
			}
			.layui-table, .layui-table-view {
				margin: 0;
			}
			.layui-col-sm4 {
				text-align: center;
				position: relative;
				margin:10px;
				border-radius: 4px;
				box-sizing: border-box;
    			border: 2px solid #ffffff;
			}
			.cmdlist-container img{
				width: 70%;
				height: 70%;
				position: relative;
    			margin: 15px auto 20px auto;
			}
			.tplmsk {
				width: 100%;
				height: 100%;
			    position: absolute;
			    left: 0;
			    top: 0;
			    background-color: rgba(0,0,0,0.5);
			    display: none;
			}
			.tplbtn {
				position: relative;
				left: 0;
				top:50%;
				color: white;
			    padding: 8px 20px;
			    border: 2px solid #ffffff;
			    border-radius: 4px;
			    display: inline-block;
			    cursor:pointer;
			}
			.info {
			    font-weight: bold;
			    height: 40px;
			    line-height: 44px;
			    text-align: center;
			}
			.selected {
				border: 2px solid rgb(220, 20, 60);
			}
			.layui-col-sm4:hover .tplmsk{
		        display: block;
		    }
		</style>
		 <script src="/usercp/layui/layui.js"></script>
		<script>
		layui.use(['form'], function(){
		  	var form = layui.form;
		  	var $ = layui.$;
		  	var site_id = getQueryString('site_id');

		  	//选择模板
		  	$('.tplbtn').click(function(){
		  		var type_id = $(this).data('typeid');
		  		var type = $(this).data('type');
		  		choose_template(type_id,type,site_id);
		  	})
		  	function choose_template(type_id,type,site_id){
		  		layer.confirm('选择模板后，需要重新下载代码包并上传才能生效，是否确认选择？', function(index){
	              	$.post('/usercp/site/template',{'site_id':site_id,'type_id':type_id,'type':type},function(data){
	              		if(data.code == 200){
		                	layer.msg('保存成功！', {
			                    offset: '15px'
			                    ,icon: 1
			                    ,time: 2000
			                }, function(){
			                	window.location.reload();
			                });
		                	//按钮变灰
		                }else{
		                	layer.msg(data.msg, {
			                    offset: '15px'
			                    ,icon: 2
			                    ,time: 2000
			                }, function(){});
		                }
	              	})
	              	layer.close(index);
	            })
		  	}
		});
		function getQueryString(name) { 
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
			var r = window.location.search.substr(1).match(reg); 
			if (r != null) return unescape(r[2]); return null; 
		} 
		</script>
	</body>
</html>
